<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" draggable :show-fullscreen="true" :width="1000" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="left">
            <el-form-item label-width="130px" label="审核状态" prop="apply_status">
                <el-radio v-model="form.apply_status" v-for="(item,index) in apply_status_option" :key="index" :label="index">{{item}}</el-radio>
        	</el-form-item>
            
            
            <el-form-item v-if="form.apply_status=='3'" label="拒绝理由" prop="refuse_ps">
                <el-input v-model="form.refuse_ps" clearable></el-input>
        	</el-form-item>

            <el-form-item label-width="130px" label="商品类型" prop="type">
                <el-radio v-model="form.type" v-for="(item,index) in type_option" :key="index" :label="index">{{item}}</el-radio>
        	</el-form-item>
            <el-form-item label-width="130px" label="标题" prop="title">
                <el-input v-model="form.title" clearable></el-input>
        	</el-form-item>
            <!-- <el-form-item label-width="130px" label="副标题" prop="subtitle">
                <el-input v-model="form.subtitle" clearable></el-input>
        	</el-form-item> -->
            <el-form-item label-width="130px" label="商品状态" prop="status">
                <el-radio v-model="form.status" v-for="(item,index) in status_option" :key="index" :label="index">{{item}}</el-radio>
        	</el-form-item>
            <el-form-item label-width="130px" label="商品分类" prop="goodscate_ids">
                <el-input disabled v-model="form.goodscate_ids" clearable></el-input>
        	</el-form-item>
            <!-- <el-form-item label-width="130px" label="所属分类" prop="category_ids">
                <el-input v-model="form.category_ids" clearable></el-input>
        	</el-form-item> -->
            <el-form-item label-width="130px" label="商品类型" prop="new_status">
                <el-radio v-model="form.new_status" v-for="(item,index) in new_status_option" :key="index" :label="index">{{item}}</el-radio>
        	</el-form-item>

            <el-form-item v-if="form.new_status=='soon'" label="到期时间" prop="expire_time">
                <el-date-picker v-model="form.expire_time" type="datetime"  ></el-date-picker>
        	</el-form-item>

     
            
            <!-- <el-form-item label-width="130px" label="视频封面" prop="video_image">
                <sc-upload v-model="form.video_image" icon="el-icon-picture-outline"></sc-upload>
        	</el-form-item> -->
            <!-- <el-form-item label-width="130px" label="视频文件" prop="video_file">
                <el-input v-model="form.video_file" clearable></el-input>
        	</el-form-item> -->
        
         

            <el-form-item label-width="130px" label="商品主图" prop="image">
                <sc-upload v-model="form.image" icon="el-icon-picture-outline"></sc-upload>
        	</el-form-item>
            <el-form-item label-width="130px" label="轮播图" prop="images">
                <sc-upload-multiple v-model="form.images"></sc-upload-multiple>
        	</el-form-item>
            <el-form-item label-width="130px" label="参数详情" prop="params">
                <el-input disabled v-model="form.params" clearable></el-input>
        	</el-form-item>
           
            <el-form-item label-width="130px" label="价格" prop="price">
                <el-input-number v-model="form.price"></el-input-number>
        	</el-form-item>
            <el-form-item label-width="130px" label="原价" prop="original_price">
                <el-input-number v-model="form.original_price"></el-input-number>
        	</el-form-item>
            <el-form-item label-width="130px" label="是否多规格" prop="is_sku">
                <el-input-number v-model="form.is_sku"></el-input-number>
        	</el-form-item>
            <!-- <el-form-item label-width="130px" label="收藏人数" prop="likes">
                <el-input-number v-model="form.likes"></el-input-number>
        	</el-form-item>
            <el-form-item label-width="130px" label="浏览人数" prop="views">
                <el-input-number v-model="form.views"></el-input-number>
        	</el-form-item>
            <el-form-item label-width="130px" label="销量" prop="sales">
                <el-input-number v-model="form.sales"></el-input-number>
        	</el-form-item>
            <el-form-item label-width="130px" label="显示销量" prop="show_sales">
                <el-input-number v-model="form.show_sales"></el-input-number>
        	</el-form-item>
            <el-form-item label-width="130px" label="服务标签" prop="service_ids">
                <el-input v-model="form.service_ids" clearable></el-input>
        	</el-form-item> -->

            <el-form-item label-width="130px" label="发货方式" prop="dispatch_type">
                <el-radio v-model="form.dispatch_type" v-for="(item,index) in dispatch_type_option" :key="index" :label="index">{{item}}</el-radio>
        	</el-form-item>


            <!-- <el-form-item label-width="130px" label="发货方式" prop="dispatch_type">
                <el-switch v-model="form.dispatch_type" :active-value="1" :inactive-value="0"></el-switch>
        	</el-form-item> -->
            <el-form-item label-width="130px" label="发货模板" prop="dispatch_ids">
                <el-input v-model="form.dispatch_ids" clearable></el-input>
        	</el-form-item>
            <el-form-item label-width="180px" label="卖家现金服务费比率" prop="goods_service_ratio">
                <el-input-number v-model="form.goods_service_ratio"></el-input-number>
        	</el-form-item>
            <!-- <el-form-item label-width="130px" label="添加时间" prop="createtime">
                <el-date-picker v-model="form.createtime" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label-width="130px" label="更新时间" prop="updatetime">
                <el-date-picker v-model="form.updatetime" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label-width="130px" label="删除时间" prop="deletetime">
                <el-date-picker v-model="form.deletetime" type="datetime"></el-date-picker>
        	</el-form-item> -->
            <el-form-item label-width="130px" label="店铺ID" prop="store_id">
                <el-input-number disabled v-model="form.store_id"></el-input-number>
        	</el-form-item>

<!-- 
            <el-form-item label-width="130px" label="店铺ID" prop="store_id">
                <sc-select v-model="form.store_id" :apiObj="$API.goods.read" clearable filterable style="width: 100%;"></sc-select>
        	</el-form-item> -->


            <el-form-item label-width="130px" label="店铺ID" prop="store_id">
                <el-select v-model="selectedValue" placeholder="请选择">
                <el-option
                    v-for="option in $API.store.read"
                    :key="option.id"
                    :label="option.name"
                    :value="option.name"
                ></el-option>
                </el-select>
            </el-form-item>

           

            <el-form-item label-width="130px" label="品牌ID" prop="goodsbrand_id">
                <el-input-number disabled v-model="form.goodsbrand_id"></el-input-number>
        	</el-form-item>
            <el-form-item label-width="130px" label="发货地址" prop="send_addr">
                <el-input v-model="form.send_addr" clearable></el-input>
        	</el-form-item>
            <el-form-item label-width="130px" label="详情多图" prop="content_images">
                <sc-upload-multiple v-model="form.content_images"></sc-upload-multiple>
        	</el-form-item>

            <el-card  header="图文详情" prop="content">
                <sc-editor v-model="form.content" placeholder=""></sc-editor>
        	</el-card >

            <el-card shadow="never" header="商品视频">
                        <sc-video :src="form.video_file" :options="{poster:form.video_image,pip:true}"></sc-video>
                </el-card>
         
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取 消</el-button>
            <el-button v-if="mode!='read'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
    import { defineAsyncComponent } from 'vue';
    const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));
    import scVideo from '@/components/scVideo';
    export default {
        emits: ['success', 'closed'],
        name: 'scvideo',
        
        components: {
            scEditor,
            scVideo
        },
        data() {
            return {
                mode: "create",
                titleMap: {
                    read: '查看',
                    create: '新增',
                    update: '编辑',
                },
                visible: false,
                isSaveing: false,
                form: {
                    id: 0,
					apply_status: '',
					type: '',
					title: '',
					subtitle: '',
					status: '',
					goodscate_ids: '',
					category_ids: '',
					new_status: '',
					video_image: '',
					video_file: '',
					image: '',
					images: '',
					params: '',
					content: '',
					price: '',
					original_price: '',
					is_sku: '',
					likes: '',
					views: '',
					sales: '',
					show_sales: '',
					service_ids: '',
					dispatch_type: '',
					dispatch_ids: '',
					goods_service_ratio: '',
					createtime: '',
					updatetime: '',
					deletetime: '',
					store_id: '',
					goodsbrand_id: '',
					send_addr: '',
					content_images: '',
                    refuse_ps:'',
                    expire_time:'',
                },
                rules: {
                },
				apply_status_option:{"0":"未知","1":"申请中","2":"已通过","3":"已拒绝"},
				type_option:{"normal":"实体商品","virtual":"虚拟商品","service":"服务"},
				status_option:{"up":"上架","hidden":"隐藏商品","down":"下架"},
				new_status_option:{"new":"全新","unused":"闲置","soon":"临期"},
				dispatch_type_option:{"express":"物流快递","selfetch":"用户自提","store":"商家配送","autosend":"自动发货","service":"上门核销"},
            }
        },
        methods: {
            open(mode='create'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            submit(){
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        var res = await this.$API.goods[this.mode].post(this.form);
                        this.isSaveing = false;
                        if(res.code == 200){
                            this.$emit('success', this.form, this.mode)
                            this.visible = false;
                            this.$message.success(res.message)
                        }else{
                            this.$alert(res.message, "提示", {type: 'error'})
                        }
                    }else{
                        return false;
                    }
                })
            },
            setData(data){
                this.$TABLE.assign(this,data);
            }
        }
    }
</script>